import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import defaultHead from "@images/sex0.webp";
import MDEditor from "@uiw/react-md-editor";
import SvgIcon from "@components/SvgIcon";
import { useParams, useNavigate } from "react-router-dom";
import { connect } from "react-redux";
import {
    getOneLeaveMessageAction,
    addLikeLeaveMessageAction,
    cutLikeLeaveMessageAction,
    deleteOneLeaveMessageAction,
} from "@redux/actions02";
import moment from "moment";
import { profile } from "@depjs/storage";

const ReadMessage = (props) => {
    const { id } = useParams();
    const navigate = useNavigate();
    const {
        getOneLeaveMessageAction,
        message,
        addLikeLeaveMessageAction,
        cutLikeLeaveMessageAction,
        deleteOneLeaveMessageAction,
    } = props;
    const [isShow, setShow] = useState(false);

    const doLike = (likeList) => {
        likeList.includes(profile.userName)
            ? cutLikeLeaveMessageAction(id)
            : addLikeLeaveMessageAction(id);
    };

    const deleteMessage = () => {
        deleteOneLeaveMessageAction(id, navigate);
    };

    useEffect(() => {
        getOneLeaveMessageAction && id && getOneLeaveMessageAction(id);
    }, [getOneLeaveMessageAction, id]);

    return (
        <div className={styles.read_message}>
            <div className={styles.head_img}>
                <div className={styles.head}>
                    <img
                        src={
                            message && message.avatarUrl
                                ? require(`@images/head//${message.avatarUrl}`)
                                : defaultHead
                        }
                        alt=""
                    />
                </div>
                <p className={styles.user_name}>
                    {message ? message.userName : "--"}
                </p>
                {message && message.userName === profile.userName ? (
                    <div className={styles.operate}>
                        <span
                            className={styles.oper_edit}
                            onClick={() => {
                                navigate("/messageBoard/publish-message", {
                                    state: { id },
                                });
                            }}
                        >
                            重新编辑
                        </span>
                        &emsp;
                        <span
                            className={styles.oper_delete}
                            onClick={() => {
                                setShow(!isShow);
                            }}
                        >
                            删除此条
                        </span>
                        {isShow ? (
                            <div className={styles.del_bounced}>
                                <p className={styles.del_text}>
                                    确定要删除此条留言吗？
                                </p>
                                <ul className={styles.del_ul}>
                                    <li
                                        onClick={() => {
                                            setShow(false);
                                        }}
                                    >
                                        取消
                                    </li>
                                    <li onClick={deleteMessage}>确定</li>
                                </ul>
                            </div>
                        ) : null}
                    </div>
                ) : null}
            </div>
            <p className={styles.title}>{message ? message.title : "--"}</p>
            <div className={styles.line}></div>
            <div className={styles.md_wrap}>
                <MDEditor.Markdown
                    className={styles.md}
                    source={message ? message.content : "暂无内容--"}
                />
            </div>
            <div className={styles.foot}>
                <div className={styles.like_wrap}>
                    <div
                        className={styles.like}
                        onClick={() => {
                            doLike(message.likeList);
                        }}
                    >
                        {/**点赞后font为icon-dianzan01 */}
                        <SvgIcon
                            font={
                                message && message.likeList
                                    ? message.likeList.includes(
                                          profile.userName
                                      )
                                        ? "icon-dianzan01"
                                        : "icon-dianzan"
                                    : "icon-dianzan"
                            }
                        />
                    </div>
                    <p className={styles.like_nums}>
                        {message ? message.likeNum : "--"}
                    </p>
                </div>
                <p className={styles.date}>
                    {message
                        ? moment(message.publishDate).format(
                              "YYYY年MM月DD日 HH:mm:ss"
                          )
                        : "--"}
                </p>
            </div>
        </div>
    );
};

export default connect((state) => ({ message: state.oneLeaveMessageReducer }), {
    getOneLeaveMessageAction,
    addLikeLeaveMessageAction,
    cutLikeLeaveMessageAction,
    deleteOneLeaveMessageAction,
})(ReadMessage);
